<template>
	<view class="sxran-im-liaison-list">
		<sxran-im-search @input='onSearchInput'></sxran-im-search>
		<view class="sxran-im-group">
			<view class="sxran-im-group-content">
				<sxran-im-list-item :title="item.title" v-for="(item,index) in list" :key="index"
					@change="change(item.path)">
					<template v-slot:left>
						<view class="">
							<uni-icons :type="item.icon" size="30" color='var(--uni-text-color)'></uni-icons>
							<sxran-im-badge v-if="item.path =='friend-notice'" :value="notificationUnreadCount" absolute
								:offset="[0,-10]"></sxran-im-badge>
						</view>
					</template>
					<template v-slot:right>
						<sxran-im-icon name="arrow-right"></sxran-im-icon>
					</template>
				</sxran-im-list-item>
			</view>
		</view>

		<view class="sxran-im-liaison-list-body">
			<view class="sxran-im-group">
				<view class="sxran-im-group-title">
					<sxran-im-text text="好友列表" size="14" color='var(--uni-text-color-grey)'></sxran-im-text>
				</view>
				<view class="sxran-im-group-content">
					<scroll-view class='scrll-view'>
						<sxran-im-list-item @change='onChange(item)' v-for="(item,index) in friendsList" :title='item.nick'
							:avatarText='item.nickname' :avatarUrl='item.avatar' :badge-text="0" :isDot='false'
							:isBadge="false" :key="index"></sxran-im-list-item>
						<view class="load-more" v-if="loading">
							<uni-load-more :status="status" :contentText='contentText'></uni-load-more>
						</view>
					</scroll-view>
				</view>
			</view>

		</view>

	</view>

</template>

<script>
	export default {
		name: 'liaison-list',
		props: {

		},
		data() {
			return {
				num: 50,
				status: 'loading',
				loading: false,
				data: [],
				userMsgList: [],
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				words: '',
				list: [{
						icon: 'personadd',
						title: '新朋友',
						path: 'friend-tongan'
					},
					// {
					// 	icon: 'staff',
					// 	title: '群聊',
					// 	path:'friend-notif'
					// },
					{
						icon: 'chatboxes',
						title: '创建群聊',
						path: 'friend-group'
					},
					{
						icon: 'person',
						title: '好友通知',
						path: 'friend-notice'
					}, {
						icon: 'notification',
						title: '系统通知',
						path: 'system-notice'
					}
				]
			}
		},
		computed: {
			friendsList() {
				return uni.$Im.getFriensdsList(this.words)
			},
			notificationUnreadCount() {
				return uni.$Im.getNotificationUnreadCount()
			}
		},
		mounted() {
			uni.$Im.getFriendsCmdMethods();
			uni.$Im.getNotificationListCmdMethods();
		},
		methods: {
			onChange(value) {
				console.log(value, '---')
				//创建会话
				//好友列表创建会话
				const params = {
					"chatType": 2,
					"originalTo": value.userId
				}
				uni.$Im.generateConversationId(params, (data) => {
					// #ifdef H5
					if (!uni.$u.isMobile()) {
						uni.$Im.setCurrentTab(1);
					}
					// #endif
					uni.$Im.setCurrentConversationId(data.id);
				})

				// #ifdef H5
				//检测是否为浏览器移动端
				if (uni.$u.isMobile()) {
					uni.navigateTo({
						url: '/uni_modules/sxran-im-modules/pages/chat/chat'
					})
				}
				// #endif

				// #ifndef H5
				uni.navigateTo({
					url: '/uni_modules/sxran-im-modules/pages/chat/chat'
				})
				// #endif


			},
			change(value) {
				// #ifdef H5
				if (uni.$u.isMobile()) {
					uni.navigateTo({
						url: `/uni_modules/sxran-im-modules/pages/${value}/${value}`
					})
				}
				this.$emit('change', value)
				// #endif

				// #ifndef H5
				uni.navigateTo({
					url: `/uni_modules/sxran-im-modules/pages/${value}/${value}`
				})
				// #endif
			},
			//防抖搜索
			onSearchInput: uni.$u.debounce(function(words) {
				this.words = words
			}, 500)

		},
	}
</script>

<style scoped lang="scss">
	.sxran-im-liaison-list {
		height: 100%;
		display: flex;
		flex-direction: column;

		.sxran-im-liaison-list-body {
			flex-grow: 1;
			overflow: hidden;

			.sxran-im-group {
				display: flex;
				flex-direction: column;
				height: 100%;

				.sxran-im-group-title {
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: $uni-spacing-col-base $uni-spacing-row-base;
					font-weight: normal;
				}

				.sxran-im-group-content {
					flex-grow: 1;
					flex-shrink: 1;
					overflow: hidden;
				}
			}

			.scrll-view {
				height: 100%;

				.load-more {
					height: 100%;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>